<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- <ul >
         <li>
         <img src="@/assets/look01.png" alt="" width="100%" style="display: block;">
          <div class="title">简约知性记忆棉坐垫</div>
          <div class="price">￥46.00元</div>
        </li> 
        </ul>
        -->
          <ul>
            <li v-for="goods in goodsList " :key="goods.id" @click="goPro(goods.id)"> 
            <img :src="goods.list_pic_url" alt="" width="100%" style="display: block;">
              <div class="title">{{goods.name}}</div>
              <div class="price">￥{{goods.retail_price}}.00元</div>
            </li>
          </ul>
    </van-pull-refresh>

  </div>
</template>

<script>
export default {
  name: 'Product',
  data() {
    return {
      isLoading: false
    }
  },
  props: ['goodsList'],
  methods: {
    onRefresh(){
        alert("刷新")
    },
    goPro(id){
      this.$router.push("/Productdetail/" + id);
    }

  },
 
}
</script>

<style lang="less" scoped>
ul {
  background-color: #efefef;
  padding: .1rem 2%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
}
li {
    width: 49%;
    background-color: #fff;
    text-align: center;
    line-height: .3rem;
    margin-bottom: .1rem;
    .title {
      // 最多显示一行的文字，多余的内容会被省略
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .price {
      color: darkred;
    }
  }
</style>